<template>
  <div>
    <div>
      <h1>$emit和$on，事件的使用和消费。</h1>
      <p>$on事件的定义，在创建demo前定义事件</p>
      <p>$emit消费事件，在点击按钮时消费事件</p>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <div class="button">
        <el-button @click="doClick">$emit消费按钮</el-button>
      </div>
    </div>
    <div>
      <br />
      <h1>directiv指令</h1>
      <p>1、封装指令，无参数指令，封装line指令demo</p>
      <div><div v-line>商店</div></div>
      <p>2、封装指令，封装loading指令demo</p>
      <div v-loading="isloading">{{ loadingData }}</div>
      <div><el-button @click="update">更新</el-button></div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
Vue.directive("line", function (el) {
  el.innerHTML = el.innerHTML + " ------------ ";
  el.style.color = "blue";
});
Vue.directive("loading", {
  //两个参数：第一个loading和指令保持一致 第二个：是一个对象
  update(el, binding, vnode) {
    // console.log(el);
    // console.log("_______________________1");
    // console.log(binding);
    // console.log("_______________________2");
    // console.log(vnode);

    //   console.log(el, binding, vnode); //update三参数：el: 指令所绑定的元素，可以用来直接操作 DOM 。binding：
    if (binding.value == true) {
      const div = document.createElement("div");
      div.innerText = "加载中";
      div.setAttribute("id", "loading");
      div.style.position = "fixed";
      div.style.left = 0;
      div.style.top = 0;
      div.style.height = "100%";
      div.style.width = "100%";
      div.style.justifyContent = "center";
      div.style.alignItems = "center";
      div.style.color = "white";
      div.style.background = "rgba(0,0,0,.7)";
      document.body.append(div);
    } else {
      document.body.removeChild(document.getElementById("loading"));
    }
  },
});
export default {
  data() {
    return {
      message: "",
      input: "",
      loadingData: "",
      isloading: false,
    };
  },
  created() {
    this.$on("my_event", this.initEvent);
    this.$on(["my_event1", "my_event2"], this.initEvent); //可以定义多个事件
    // console.log(this._events); //vm中的输出事件
  },
  methods: {
    update() {
      this.isloading = true;
      setTimeout(() => {
        this.loadingData = "用户数据";
        this.isloading = false;
      }, 3000);
    },
    doClick() {
      this.$emit("my_event");
    },
    initEvent() {
      alert(this.input);
      // console.log(this.input);
    },
    //服务器算法
    countServers(grid) {
      var h = grid.length;
      var l = grid[0].length;
      var sum = 0;
      var harr = new Array(h).fill(0);
      var larr = new Array(l).fill(0);
      for (var i = 0; i < h; i++) {
        for (var j = 0; j < l; j++) {
          if (grid[i][j] == 1) {
            harr[i]++;
            larr[j]++;
          }
        }
      }
      for (var i = 0; i < h; i++) {
        for (var j = 0; j < l; j++) {
          if (grid[i][j] == 1 && (harr[i] > 1 || larr[j] > 1)) {
            sum++;
          }
        }
      }
      // console.log(sum);
      return sum;
    },
    //算法1
    getdata() {
      // //解析器调用函数时，每次都会像函数内部传递一个隐含的参数
      // //this指向的是对象，
      // console.log(this);
      var twoSum = function (num, target) {
        var result = [];
        for (var j = 0; j < num.length; j++) {
          for (var i = j + 1; i < num.length; i++) {
            if (num[i] + num[j] == target) {
              result.push(i);
              result.push(j);
            }
            i++;
          }
          j++;
        }
        // console.log(result);
      };

      twoSum([2, 7, 11, 15], 9);
    },
    //算法2
    getInitdata() {
      var removeDuplicates = function (S) {
        debugger;
        var arr = S.split("");
        this.fun(arr);
      };
      removeDuplicates("abbaca");
    },
    fun(arr) {
      if (arr.length == 1 || arr.length == 0) {
        return arr;
      } else {
        for (var i = 0; i < arr.length; i++) {
          if (arr[i] == arr[i + 1]) {
            arr.splice(i, 2);
            this.fun(arr);
          }
        }
      }
      var s = arr.join("");
      return s;
    },
  },
  /**
   * @param {number[][]} grid
   * @return {number}
   */

  mounted() {
    // this.getdata();
    // this.getInitdata();
    // this.countServers([
    //   [1, 0],
    //   [1, 1],
    // ]);
  },
};
</script>
<style scoped>
.button {
  position: absolute;
  right: 50%;
  transform: translate(50%, 50%);
}
</style>